<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>enrollment</title>

    <script src="./jquery/dist/jquery.min.js"></script>
    <script src="./popper.js/dist/umd/popper.min.js"></script>


    <link rel="stylesheet" href="./bootstrap/dist/css/bootstrap.min.css">


    <script src="./bootstrap/dist/js/bootstrap.min.js"></script>



    <link rel="stylesheet" href="./summernote/dist/summernote-bs4.css">
    <script src="./summernote/dist/summernote-bs4.js"></script>
    <!--<script src="./summernote/dist/lang/summernote-zh-CN.min.js"></script>-->



    <script src="./vue/dist/vue.min.js"></script>
    <script src="./moment/moment.js"></script>
    <script src="./moment/locale/zh-cn.js"></script>
</head>

<body>

    <div class="container" style="margin: 20px auto;" id="enrollmentApp">

        <button type="button" class="btn btn-primary" @click="fnShowEnrollmentModal">add</button>

        <button type="button" class="btn btn-link" @click="fnUp">上一页</button>
        <button type="button" class="btn btn-link" @click="fnDown">下一页</button>

        <div class="card" v-for="(item, index) in dataList" :key="index" style="margin-top: 20px;">
            <img class="card-img-top" src="./blue.jpg" style="height: 50px;">
            <div class="card-body">
                <!--<h4 class="card-title">{{item.sname}}</h4>-->
                <table class="table table-responsive-sm">
                    <tbody class="w-100">

                        <tr class="row mx-0">
                            <td class="col-3">姓名</td>
                            <td class="col-9">{{item.childName}}</td>
                        </tr>
                        <tr class="row mx-0">
                            <td class="col-3">年龄</td>
                            <td class="col-9">
                                {{item.age}}
                            </td>
                        </tr>
                        <tr class="row mx-0">
                            <td class="col-3">性别</td>
                            <td class="col-9">{{item.sex}}</td>
                        </tr>
                        <tr class="row mx-0">
                            <td class="col-3">家长称呼</td>
                            <td class="col-9">{{item.guardianRelation}}</td>
                        </tr>
                        <tr class="row mx-0">
                            <td class="col-3">家长电话</td>
                            <td class="col-9">{{item.guardianPhone}}</td>
                        </tr>


                        <tr class="row mx-0">
                            <td class="col-3">说明</td>
                            <td class="col-9">{{item.note}}</td>
                        </tr>
                        <tr class="row mx-0">
                            <td class="col-3">操作</td>
                            <td class="col-9">

                                <button type="button" class="btn btn-link" @click="fnShowUpdateModal(item)">修改</button>
                                <button type="button" class="btn btn-link"
                                    @click="fnShowCourseTermModal(item)">选班</button>
                                <button type="button" class="btn btn-link"
                                    @click="fnShowOKCourseTermModal(item)">查看选班</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>


        <!-- 模态框 -->
        <div class="modal fade" id="enrollmentModal">
            <div class="modal-dialog">
                <div class="modal-content">

                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">操作</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- 模态框主体 -->
                    <div class="modal-body">

                        <form>

                            <div class="form-group">
                                <label for="">姓名</label>
                                <input type="text" class="form-control" v-model="enrollmentForm.childName">
                            </div>
                            <div class="form-group">
                                <label for="">年龄</label>
                                <input type="text" class="form-control" v-model="enrollmentForm.age">
                            </div>
                            <div class="form-group">
                                <label for="">性别</label>
                                <input type="text" class="form-control" v-model="enrollmentForm.sex">
                            </div>
                            <div class="form-group">
                                <label for="">家长称呼</label>
                                <input type="text" class="form-control" v-model="enrollmentForm.guardianRelation">
                            </div>
                            <div class="form-group">
                                <label for="">家长手机</label>
                                <input type="text" class="form-control" v-model="enrollmentForm.guardianPhone">
                            </div>

                            <div class="form-group">
                                <label for="">说明</label>
                                <textarea class="form-control" v-model="enrollmentForm.note" rows="3"></textarea>
                            </div>


                        </form>
                    </div>

                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" @click="fnSave">确定</button>
                    </div>

                </div>
            </div>
        </div>


        <!--选择 课程-->
        <div class="modal fade" id="courseTermModal">
            <div class="modal-dialog">
                <div class="modal-content">

                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">操作</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- 模态框主体 -->
                    <div class="modal-body">

                        <table class="table table-responsive-sm" v-for="(item, index) in courseTermList" :key="index">
                            <tbody class="w-100">

                                <tr class="row mx-0">
                                    <td class="col-3">课程</td>
                                    <td class="col-9">{{item.courseName}}</td>
                                </tr>
                                <tr class="row mx-0">
                                    <td class="col-3">上课时间</td>
                                    <td class="col-9">{{item.courseTime}}</td>
                                </tr>
                                <tr class="row mx-0">
                                    <td class="col-3">开始日期</td>
                                    <td class="col-9">{{item.startDate}}</td>
                                </tr>
                                <tr class="row mx-0">
                                    <td class="col-3">次数</td>
                                    <td class="col-9">{{item.totals}}</td>
                                </tr>
                                <tr class="row mx-0">
                                    <td class="col-3">费用价格</td>
                                    <td class="col-9">{{item.fee}}</td>
                                </tr>


                                <tr class="row mx-0">
                                    <td class="col-3">操作</td>
                                    <td class="col-9">
                                        <button type="button" class="btn btn-link" @click="fnSelect(item)">选择</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- 模态框底部 -->
                    <!--<div class="modal-footer">-->
                    <!--<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>-->
                    <!--<button type="button" class="btn btn-primary" @click="fnSave">确定</button>-->
                    <!--</div>-->

                </div>
            </div>
        </div>

        <!--已选择 课程-->
        <div class="modal fade" id="okCourseTermModal">
            <div class="modal-dialog">
                <div class="modal-content">

                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">操作</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- 模态框主体 -->
                    <div class="modal-body">

                        <table class="table table-responsive-sm" v-for="(item, index) in studyList" :key="index">
                            <tbody class="w-100">

                                <tr class="row mx-0">
                                    <td class="col-3">课程</td>
                                    <td class="col-9">{{item.courseTerm.courseName}} - {{item.courseTerm.startDate}}
                                    </td>
                                </tr>
                                <tr class="row mx-0">
                                    <td class="col-3">上课时间</td>
                                    <td class="col-9">{{item.courseTerm.courseTime}} </td>
                                </tr>
                                <tr class="row mx-0">
                                    <td class="col-3">报名时间</td>
                                    <td class="col-9">{{item.cdate}}</td>
                                </tr>

                                <tr class="row mx-0">
                                    <td class="col-3">费用价格</td>
                                    <td class="col-9">{{item.courseTerm.fee}}</td>
                                </tr>
                                <tr class="row mx-0">
                                    <td class="col-3">交费状态</td>
                                    <td class="col-9">{{item.feeFlag}}</td>
                                </tr>

                                <tr class="row mx-0">
                                    <td class="col-3">操作</td>
                                    <td class="col-9">
                                        <button type="button" class="btn btn-link"
                                            @click="fnPaymentModal(item)">交费</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- 模态框底部 -->
                    <!--<div class="modal-footer">-->
                    <!--<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>-->
                    <!--<button type="button" class="btn btn-primary" @click="fnSave">确定</button>-->
                    <!--</div>-->

                </div>
            </div>
        </div>


        <!--交费-->
        <div class="modal fade" id="paymentModal">
            <div class="modal-dialog">
                <div class="modal-content">

                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">操作</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- 模态框主体 -->
                    <div class="modal-body">

                        <table class="table table-responsive-sm">
                            <tbody class="w-100">

                                <tr class="row mx-0">
                                    <td class="col-3">课程</td>
                                    <td class="col-9">{{payment.courseTerm.courseName}} -
                                        {{payment.courseTerm.startDate}}</td>
                                </tr>
                                <tr class="row mx-0">
                                    <td class="col-3">上课时间</td>
                                    <td class="col-9">{{payment.courseTerm.courseTime}} </td>
                                </tr>
                                <tr class="row mx-0">
                                    <td class="col-3">报名时间</td>
                                    <td class="col-9">{{payment.cdate}}</td>
                                </tr>

                                <tr class="row mx-0">
                                    <td class="col-3">费用价格</td>
                                    <td class="col-9">{{payment.fee}}</td>
                                </tr>
                                <tr class="row mx-0">
                                    <td class="col-3">应交费用</td>
                                    <td class="col-9">

                                        <div class="form-group">
                                            <label for=""></label>
                                            <input type="number" min="0" name=""  class="form-control" v-model="payment.payFee">

                                        </div>

                                    </td>
                                </tr>


                            </tbody>
                        </table>
                    </div>

                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" @click="fnSavePayment">确定</button>
                    </div>

                </div>
            </div>
        </div>

    </div>


</body>

</html>


<script>


    var vm = new Vue({
        el: '#enrollmentApp',
        data: {

            pageNum: 0,
            enrollmentForm: {

                course: {
                    sname: '',
                    sid: '',
                }
            },
            dataList: [],

            courseTermList: [],

            //某一个学生信息
            stu: {},

            studyList: [],

            payment: {
                courseTerm: {}
            },

        },


        filters: {

            fmtDate(date) {
                return date + moment(date).format('dddd');
            }
        },


        methods: {


            //上一页
            fnUp() {
                this.pageNum--;
                if (this.pageNum < 0) {
                    this.pageNum = 0;
                }
                this.queryEnrollment();
            },

            //下一页
            fnDown() {

                this.pageNum++;
                if (this.pageNum > 100) {
                    this.pageNum = 100;
                }

                this.queryEnrollment();
            },

            getQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            },


            // 新增 modal
            fnShowEnrollmentModal() {

                $('#enrollmentModal').modal('show');
            },


            //修改 modal
            fnShowUpdateModal(item) {
                this.enrollmentForm = item;
                $('#enrollmentModal').modal('show');
            },


            //选择课程 modal
            fnShowCourseTermModal(item) {


                this.stu = item;
                //查询都有哪些课程
                this.queryCourseTerm();

                $('#courseTermModal').modal('show');
            },


            //查看已选班级 modal
            fnShowOKCourseTermModal(item) {


                // this.stu = item;
                //查询都有哪些课程
                this.queryStudyByStuId(item);

                $('#okCourseTermModal').modal('show');
            },
            //交费 modal
            fnPaymentModal(item) {


                this.payment = item;

                console.log(this.payment);
                //查询都有哪些课程
                // this.queryStudyByStuId(item);

                $('#paymentModal').modal('show');
            },



            fnSavePayment() {

                var _self = this;

                var postData = {

                    study: {
                        sid: this.payment.sid
                    },

                    fee: this.payment

                }

                var postUrl = '/payments';
                $.ajax({
                    // crossDomain: true,
                    type: "post",
                    url: postUrl,
                    data: JSON.stringify(_self.payment),
                    dataType: "json",
                    contentType: 'application/json',
                    success: function (response) {
                        // console.log(response);
                        if (response.code == 0) {

                            $('#paymentModal').modal('hide');
                        }

                    }
                });
            },

            //选择课程后, 保存
            fnSelect(item) {

                console.log(this.stu);
                console.log(item);

                var _self = this;

                var obj = {
                    enrollment: this.stu,
                    courseTerm: item,
                };

                var postUrl = '/studies';
                $.ajax({
                    // crossDomain: true,
                    type: "post",
                    url: postUrl,
                    data: JSON.stringify(obj),
                    dataType: "json",
                    contentType: 'application/json',
                    success: function (response) {
                        // console.log(response);
                        if (response.code == 0) {

                            $('#courseTermModal').modal('hide');
                        } else {
                            alert(response.tip);
                        }

                    }
                });

            },

            //修改 item
            fnSave() {


                if (!this.enrollmentForm.childName) {
                    alert('姓名不能为空');
                    return false;
                }
                if (!this.enrollmentForm.guardianPhone) {
                    alert('家长手机号不能为空');
                    return false;
                }

                var _self = this;

                var postUrl = '/enrollments';
                $.ajax({
                    // crossDomain: true,
                    type: "post",
                    url: postUrl,
                    data: JSON.stringify(_self.enrollmentForm),
                    dataType: "json",
                    contentType: 'application/json',
                    success: function (response) {
                        // console.log(response);
                        if (response.code == 0) {

                            $('#enrollmentModal').modal('hide');
                            _self.enrollmentForm = {};
                            _self.queryEnrollment();
                        }

                    }
                });
            },


            queryCourseTerm() {

                var _self = this;

                $.ajax({
                    // crossDomain: true,
                    type: "get",
                    url: "./course-terms",
                    // data: "data",
                    dataType: "json",
                    success: function (response) {
                        // console.log(response);
                        if (response.code == 0) {

                            console.log(response);

                            _self.courseTermList = response.dat.content;
                        }

                    }
                });
            },

            queryStudyByStuId(item) {

                var _self = this;

                $.ajax({
                    // crossDomain: true,
                    type: "get",
                    url: "./studies/find-by-stu-id/" + item.sid,
                    // data: "data",
                    dataType: "json",
                    success: function (response) {
                        // console.log(response);
                        if (response.code == 0) {

                            console.log(response);

                            _self.studyList = response.dat;
                        }

                    }
                });
            },


            // 查询 cate
            queryEnrollment() {

                var _self = this;

                $.ajax({
                    // crossDomain: true,
                    type: "get",
                    url: "./enrollments?page=" + this.pageNum,
                    // data: "data",
                    dataType: "json",
                    success: function (response) {
                        // console.log(response);
                        if (response.code == 0) {

                            _self.dataList = response.dat.content;
                        }

                    }
                });
            },


        },
        mounted() {

            this.queryEnrollment();
        }
    })


</script>